<template>
  <el-form ref="form" label-width="100px" size="small" :model="form">
    <template v-for="(item,index) in cols">
      <el-form-item
        v-if="(addOrEdit && item.add) || (!addOrEdit && item.edit)"
        :key="index"
        :label="item.label"
        :rules="item.rule"
        :prop="item.prop"
      >
        <el-input v-if="item.editType==='input'" v-model="form[item.prop]" />
        <el-select v-else-if="item.editType==='select'" v-model="form[item.prop]">
          <el-option v-for="dict in dicts[item.prop]" :key="dict.id" :label="dict.value">{{ dict.label }}</el-option>
        </el-select>
        <el-radio-group v-else-if="item.editType==='radio'" v-model="form[item.prop]">
          <el-radio v-for="dict in dicts[item.prop]" :key="dict.id" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-else-if="item.editType==='checkbox'" v-model="form[item.prop]">
          <el-checkbox v-for="dict in dicts[item.prop]" :key="dict.id" :name="item.prop" :label="dict.value">{{ dict.label }}</el-checkbox>
        </el-checkbox-group>
        <el-switch v-else-if="item.editType==='switch'" v-model="form[item.prop]" />
        <el-date-picker
          v-else-if="item.editType==='date'"
          v-model="form[item.prop]"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <el-input v-else-if="item.editType==='textarea'" v-model="form[item.prop]" type="textarea" />
      </el-form-item>
    </template>
  </el-form>
</template>
<script>

export default {
  props: {
    // String, Number, Boolean, Function, Object, Array, Symbol
    addOrEdit: { // 新增还是修改
      required: true,
      type: Boolean
    },
    cols: {
      required: true,
      type: Array
    },
    dicts: {
      required: true,
      type: Object
    },
    form: {
      required: true,
      type: Object
    }
  },
  data() {
    return {

    }
  },
  methods: {

  },
  computed: {

  },
  watch: {

  },
  mounted() {

  }
}
</script>
